<template>
	<view class="addstore">
		<view class="inner">
			<view class="upload">
				<view class="label">
					门店照片:
				</view>
				<view class="cont">
					<u-upload width="100" height="100" :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
						name="a" :maxCount="1"></u-upload>
					<view class="error" v-if="errorList.find((item)=>item.field==='g')">
						{{errorList.find((item)=>item.field==='g').message}}
					</view>
				</view>
			</view>
			<view class="form">
				<u--form labelWidth="80" :labelStyle="{fontSize:'14px',color:'#2E2D2D'}" labelAlign="right"
					labelPosition="left" :model="formValues" ref="formRef">
					<u-form-item label="门店名称:" prop="b">
						<u--input v-model="formValues.b" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="门店地址:" prop="g" @click="handleMap">
						<view class="place" v-if="!formValues.g">
							请选择
						</view>
						<view class="valuefo" v-else>
							{{formValues.g}}
						</view>
						<template #right>
							<u-icon name="arrow-right"></u-icon>
						</template>
					</u-form-item>
					<u-form-item label="联系电话:" prop="c">
						<u--input type="number" v-model="formValues.c" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="店主名称:" prop="d">
						<u--input type="text" v-model="formValues.d" border="none" placeholder="请输入"></u--input>
					</u-form-item>

				</u--form>
			</view>

		</view>
		<view class="footer">
			<view class="btn" @click="handleSubmit">
				提交
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance();

	const formValues = reactive({
		a: '',
		b: '',
		c: '',
		d: '',
		g: ''
	})
	const fileList = ref([]);
	const location = ref('')
	const errorList = ref([])

	onReady(() => {
		const rules = {
			a: [{
				type: 'string',
				required: true,
				message: '请上传门店图片',
			}],
			b: [{
				type: 'string',
				required: true,
				message: '请输入门店名称',
			}],
			c: [{
				type: 'string',
				required: true,
				message: '请输入联系电话',
			}],
			d: [{
				type: 'string',
				required: true,
				message: '请输入店主名称',
			}],
			g: [{
				type: 'string',
				required: true,
				message: '请选择门店地址',
			}]


		}
		proxy.$refs.formRef.setRules(rules)
	})

	onShow(() => {


	})

	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = event.file;
		let fileListLen = fileList.value.length;
		fileList.value.push({
			...lists,
			status: 'uploading',
			message: '上传中',
		});
		const result = await uploadFilePromise(lists.url);
		let item = fileList.value[fileListLen];
		fileList.value.splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result,
		});
		fileListLen++;
	}

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: 'https://dscc.suishilian.com/admin/uploadFile',
				filePath: url,
				name: 'file',
				formData: {

				},
				success: (res) => {
					setTimeout(() => {
						resolve(res.data.data);
					}, 1000);
				},
			});
		});
	}
	const handleMap = () => {
		uni.getSystemInfo({
			success(res) {
				let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
				let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权
				if (locationEnabled == false || locationAuthorized == false) {
					//手机定位服务（GPS）未授权
					uni.showModal({
						title: '授权',
						content: '获取授权失败，是否前往授权？',
						success: function(result) {
							if (result.confirm) {
								uni.openAppAuthorizeSetting()
							}
						},
						fail: function() {
							uni.showToast({
								title: '请前往设置中授权位置信息',
								icon: 'none'
							})
						}
					})
				} else {
					uni.chooseLocation({
						success: function(response) {
							console.log('位置名称:', response);
							formValues.g = response.name
							location.value = response
						}
					})
				}
			}
		})

	}
	const handleSubmit = () => {
		proxy.$refs.formRef.validate().then(res => {
			console.log(res)
		}).catch(errors => {
			console.log(errors)
			errorList.value = [...errors]
		})
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss'
</style>